<script setup lang="ts">
import { useAuthStore } from '@/store/auth';
import { ref } from 'vue';

const data = ref({
    username: '',
    password: ''
})

const onSubmit = (values: { username: string, password: string}) => {
    const useStore = useAuthStore();
    useStore.login(values.username, values.password);
}

</script>

<template>
    <div class="container">
        <div class="image">
            <VanImage src="/tauri.svg" width="100" height="100"></VanImage>
        </div>
        <div class="text">
            <h3 >账号密码登录</h3>
        </div>
        <van-form style="width: 90%;" @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                    v-model="data.username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="data.password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                登录
                </van-button>
            </div>
        </van-form>
        <div class="register">
            <RouterLink to="/register">注册账号</RouterLink>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: url('http://web.yunnet.top:12900/witdata/background/login.png');
    .text {
        width: 90%;
        display: flex;
        padding-left: 10%;
    }
    .image {
        padding: 10%;
    }
    .register {
        width: 90%;
        padding-right: 10%;
        display: flex;
        justify-content: right;
    }
}
</style>